<template>
  <div class="content">
    <Resize>
      <template v-slot:left>
        <div class="content_l">
          <vxe-toolbar v-if="false">
            <template #buttons>
              <vxe-button @click="$refs.xTree.setAllTreeExpand(true)"
                >全部展开</vxe-button
              >
              <vxe-button @click="$refs.xTree.clearTreeExpand()"
                >全部关闭</vxe-button
              >
              <vxe-button @click="getSiteList" v-if="siteRow"
                >返回站点</vxe-button
              >
              <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
            </template>
          </vxe-toolbar>
          <vxe-table
            highlight-current-row
            highlight-hover-row
            row-key
            :show-header="false"
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            @current-change="clickListRow"
            class="left-table"
          >
            <vxe-column tree-node field="name" title="Name111" show-overflow>
              <template #default="{ row }">
                <span>
                  <span v-if="row.siteId == currentRowId" class="activeRow">
                    <svg-icon icon-class="right" style="color: #009a94" />
                  </span>
                  <!-- 电脑 -->
                  <img
                    src="../../../assets/icons/png/Display Check.png"
                    alt=""
                    style="vertical-align: text-bottom"
                    v-if="row.root == '000'"
                  />
                  <!-- 地球 -->
                  <img
                    src="../../../assets/icons/png/globe.gif"
                    alt=""
                    style="vertical-align: bottom"
                    v-if="!row.channelId && row.root != '000'"
                  />

                  <!-- <img src="../../../assets/icons/png/contextMenu.gif" alt="" v-if="row.siteId&& (row.id||row.root) ">
 -->

                  <!-- <i class="tree-node-icon fa" :class="$refs.xTree.isTreeExpandByRow(row) ? 'el-icon-folder-opened' : 'el-icon-folder'"></i> -->

                  <!-- @click="clickListRow(row)" -->
                  <span
                    style="cursor: pointer; fontsize: 12px; color: #000"
                    v-if="row.name"
                  >
                    {{ row.name }}</span
                  >
                  <span
                    style="cursor: pointer; fontsize: 12px; color: #f00"
                    v-if="row.user"
                  >
                    {{ row.user }}</span
                  >
                  <span
                    style="cursor: pointer; fontsize: 12px; color: #00f"
                    v-else-if="row.roleName"
                  >
                    {{ row.roleName }}</span
                  >
                  <span
                    style="cursor: pointer; fontsize: 12px; color: #000"
                    v-else-if="row.groupName"
                  >
                    {{ row.groupName }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="content_r">
          <UserList v-if="siteRow"></UserList>
          <span v-else
            >“用户管理”是
            WYCMS系统的主要功能模块，用来对系统中用户的管理。</span
          >
        </div>
      </template>
    </Resize>

    <!-- 添加或修改文件夹对话框 -->
    <el-dialog
      v-dialogDrag
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="模板文件夹名称" prop="name">
              <el-input
                v-model="form.name"
                placeholder="请输入模板文件夹名称"
                maxlength="30"
              />
            </el-form-item>
            <span>只能输入中文和英文字符，最多可以输入10个字符</span>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GroupList } from "@/api/system/userGroup";

import { listRole } from "@/api/system/role";
import { listSite } from "@/api/content/net";
import { objectMerge } from "@/utils/index";

import { mapState } from "vuex";
import UserList from "./components/list";

import auth from "@/plugins/auth";

export default {
  name: "User",
  data() {
    return {
      left: 0,
      top: 0,
      //左侧站点列表
      siteList: [],
      //左侧行
      leftRow: undefined,
      //站点  row
      siteRow: undefined,
      //添加或修改文件夹对话框
      title: null,
      open: false,
      //文件夹属性表单
      form: {},
      rules: {},
      //角色列表
      roleList: [],
      //用户列表
      userList: [],
      total: null,

      DefaultLeft: [
        {
          name: "平台用户管理页面",
        },
      ],
    };
  },

  components: { UserList },

  computed: {
    ...mapState({
      roles: (state) => state.user.roles,
    }),
    currentRowId() {
      return this.siteRow?.siteId;
    },
  },

  mounted() {
    this.getSiteList();
    this.getRoleList();
  },

  watch: {},

  methods: {
    //获取站点列表
    getSiteList() {
      this.siteRow = undefined;
      this.leftRow = undefined;
      this.templateList = [];
      listSite()
        .then((res) => {
          if (auth.hasRoleOr(["admin", "wz-admin"])) {
            res.data.unshift({
              name: "平台系统",
              siteId: this.CONSTANCE.siteId,
            });
          }

          this.siteList = [
            {
              name: "用户管理-站点列表",
              root: "000",
              children: res.data,
            },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },
    //获取模板列表
    clickListRow({ row }) {
      if (row.root == "000") {
        return;
      }
      console.log("🚀 ~ file: index.vue:166 ~ clickListRow ~ row", row);
      this.siteRow = row;
      this.$store.dispatch("column/setSiteRow", row);
      this.leftRow = null;
      return;
      if (row.roleId) {
        this.leftRow = row;
        // this.haldleClickLeft();
      } else if (row.siteId) {
        this.leftRow = row;
        // this.haldleClickSite();
      } else if (!row.root) {
        this.siteRow = row;
        this.$store.dispatch("column/setSiteRow", row);
        this.leftRow = null;
        // this.haldleClickSite();
      }
    },

    //点击站点  获取站点用户组
    haldleClickSite() {
      GroupList({ siteId: this.siteRow.siteId })
        .then((res) => {
          this.siteRow.children = this.DefaultLeft.concat(this.roleList).concat(
            res.data
          );
          this.siteRow.root = "111";
          this.siteList = [this.siteRow];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },
    //点击左侧列表
    haldleClickLeft() {
      this.getUserList();
    },

    /** 查询角色列表 */
    getRoleList() {
      listRole().then((response) => {
        this.roleList = response.data.list;
      });
    },
    //对话框确认
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            updateFileInfo(this.form).then(() => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.haldleClickSite();
            });
          } else {
            addFileInfo(
              objectMerge(this.form, { siteId: this.siteRow.siteId })
            ).then(() => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.haldleClickSite();
            });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.content {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  // padding: 10px;
  position: relative;
  border: 1px solid #ccc;
  .content_l {
    overflow: auto;
    // min-width: 240px;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
      min-width: 240px;
    }
  }
  .content_r {
    overflow: overlay;
    overflow: auto;
    width: 100%;
    // padding: 10px;
    border-left: 1px solid #ccc;
    height: 100%;
    flex: 1;
    background: #f4f4f4;
  }
}
</style>
